<template>
  <div aria-label="page">
    <ul class="pagination">

      <li>
        <span class="pageInfo">共{{total}}条数据</span>
      </li>

      <li>
        <a href="#" aria-label="Previous" v-show="current != 1" @click="current--&&jumpcurrent-- && goto(current)" >
          <span aria-hidden="true">上一页</span>
        </a>
      </li>

      <li :class="{'active':current == index}" v-for="index in pages"><a href="#" @click="goto(index)">{{index}}</a></li>

      <li>
        <a href="#" aria-label="Next" v-show="allPage != current && allPage != 0 " @click="current++ && jumpcurrent ++ && goto(current)">
          <span aria-hidden="true">下一页</span>
        </a>
      </li>

      <li>
        <a href="#" style="margin-left:10px;border:none;padding:2px 0;">第</a>
        <a href="#" style="padding:0;">
          <input class="jumpPage" type="text" v-model="jumpcurrent">
        </a>
        <a href="#" style="border:none;padding:2px 0;">页</a>
      </li>

      <li>
        <a href="#" style="margin-left:10px;background:#337AB7;color:#fff;border-color:#337AB7;" @click="goto(jumpcurrent)">跳转</a>
      </li>

    </ul>
  </div>
</template>

<script>
    export default {
        name: 'Page',
        props:['total','allPage'],
        data () {
            return {
                jumpcurrent:1,//跳转页计数
                current:1,//显示页计数
                currentnum:5,//导航总显示个数
            }
        },
        watch:{
            current:function(old,newVal){
            }
        },
        computed:{
            pages:function(){
                var pag = [];
                if( this.current < this.currentnum ){ //如果当前的激活的项 小于要显示的条数
                    //总页数和要显示的条数那个大就显示多少条
                    var i = Math.min(this.currentnum,this.allPage);
                    while(i){
                        pag.unshift(i--);
                    }
                }else{ //当前页数大于显示页数了
                    var middle = this.current - Math.floor(this.currentnum / 2 ),//从哪里开始
                        i = this.currentnum;
                    if( middle > (this.afllPage - this.currentnum) ){
                        middle = (this.allPage - this.currentnum) + 1
                    }
                    while(i--){
                        pag.push( middle++ );
                    }
                }
                return pag
            }
        },
        methods:{
            goto:function(index){
                if(this.jumpcurrent > this.allPage){
                    this.jumpcurrent = this.current;
                    return;
                }else{
                    this.jumpcurrent = index;
                    this.current = index;
                };
                this.$emit("change",index);
            }
        }
    }
</script>

<style scoped>
  .pagination {
    margin: 0;float: right
  }
  .pagination>li>a {
    /**/
    color:#555;
    padding: 2px 10px;
    margin:0 2px;
    border:1px solid #99A0A8;
    border-radius: 0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
  }

  .active>a, .active>a:focus, .active>a:hover, .active>span, .active>span:focus, .active>span:hover{
    background-color: #337AB7;
    color:#f8f8f8;
    border-color: #337AB7;
  }
  .jumpPage {
    width: 25px;
    text-align: center;
    background:none;
    border:none;
    padding:2px 0;
  }
  .pageInfo {
    padding:2px 10px;
    background:none ;
    border:none;
    color:#444;
  }
  .pageInfo:hover{
    background:none;
    border:none;
    color:#444;
  }
</style>
